<template>
	<!-- 维修类型列表 -->
	<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
	 title="维修类型列表" :visible.sync="appendDialogShow">
		<div>
			<el-row>
				<div style="float: right;">
					<el-button type="danger" @click='deleteList' :disabled="deleteDisabled">删除</el-button>
					<el-button type="primary" @click='addType'>新建</el-button>
				</div>
			</el-row>
			<div class="tableBox" v-loading='tableLoading'>
				<vueScroll>
					<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
					 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
						<el-table-column type="index" class="over" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" fixed>
						</el-table-column>
						<el-table-column label="维修类型">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
									<span class="speSpan">{{scope.row.name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</vueScroll>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
		</div>
		<AddMainType v-if='addTypeShowNow' :addTypeShowNow='addTypeShowNow' @closeAddTypeDialog='closeAddTypeDialog'
		 @upMainTypeDateList='upMainTypeDateList'></AddMainType>
	</el-dialog>
</template>

<script>
	import AddMainType from './addMainType'
	import {
		axiosPost,
		axiosGet,
		loadFn,
		axiosChange,
		axiosDelete
	} from "@/common.js"
	export default {
		components: {
			AddMainType
		},
		props: ['appendDialogShow'],
		mounted() {
			this.getList()
		},
		data() {
			return {
				page: 1,
				page_size: 10,
				total: 0,
				tableLoading: false,
				tableData: [],
				checkBoxArr: [],
				rowId: '',
				isChangeList: '',
				deleteDisabled: true,
				addTypeShowNow: false
			}
		},
		methods: {
			//获取表格数据
			getList() {
				this.tableLoading = true
				let params = {
					page: this.page,
					page_size: this.page_size,
				}
				axiosGet('/manu/elevator/type/', params, (res) => {
					this.tableLoading = false
					if (res.code == 0) {
						this.tableData = res.detail.results
						this.total = res.detail.count
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//页数变化
			handleSizeChange(size) {
				this.page_size = size
				this.getList()
			},
			//当前页变化
			handleCurrentChange(page) {
				this.page = size
				this.getList()
			},
			//关闭弹窗
			close() {
				this.$emit('closeAppendDialog')
			},
			//当前行
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
				this.isChangeList = row.can_be_modified
			},
			//能否删除
			selectChange(res) {
				setTimeout(() => {
					this.checkBoxArr = res
					if (res.length == 1 && this.isChangeList || res.length == 1 && res[0].can_be_modified) {
						this.deleteDisabled = false
					} else {
						this.deleteDisabled = true
					}
					this.rowId = res[0].id
				}, 0)
			},
			//打开新建
			addType() {
				this.addTypeShowNow = true
			},
			//关闭新建
			closeAddTypeDialog() {
				this.addTypeShowNow = false
			},
			//新建成功
			upMainTypeDateList() {
				this.addTypeShowNow = false
				this.getList()
			},
			deleteList(value) {
				this.$confirm('此操作将永久删除该维修类型, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = '/manu/elevator/type/' + this.rowId
					axiosDelete(url, {}, (res) => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {});
			},
		}
	}
</script>

<style>
</style>
